<template>
    <div class="card container">
        <div class="card-body">
            <table class="table table-centered">
                <thead>
                    <tr>
                    <th scope="col">学号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">年龄</th>
                    <th scope="col">平均成绩</th>
                    </tr>
                </thead>
                <tbody v-for="student in studentlist" :key="student.id">
                    <tr>
                    <th scope="row">{{ student.id }}</th>
                    <td>{{ student.student_name }}</td>
                    <td>{{ student.student_age }}</td>
                    <td>{{ student.student_score }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
export default {
    name: 'StudentView',
    setup() {
        const studentlist = ref([]);
        $.ajax({
            url: "http://47.121.28.202:8000/settings/student/",
            type: "GET",
            success(resp) {
                studentlist.value = resp;
                console.log(studentlist.value);
            } 
        })

        return {
            studentlist
        }
    }
}
</script>

<style scoped>
.table-centered th,  
.table-centered td {  
    vertical-align: middle; 
    text-align: center;
}
</style>